<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-card class="header-card">
      <div>
        <div class="fl headL">
          <div class="headImg">
            <img v-imagerror="img" :src="staffPhoto">
          </div>
          <div class="headInfoTip">
            <p class="firstChild">{{ name }},又是元气满满的一天！</p>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 主要图表内容 -->
    <!-- 三个环形图 -->
    <el-row :gutter="20">
      <el-col :span="8"><el-card><sex /></el-card></el-col>
      <el-col :span="8"><el-card><age /></el-card></el-col>
      <el-col :span="8"><el-card><education /></el-card></el-col>
    </el-row>
    <!-- 折线图和柱状图 -->
    <el-row :gutter="20">
      <el-col :span="14"><el-card><total-expenditure /></el-card></el-col>
      <el-col :span="10"><el-card><department /></el-card></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user')
import Sex from './components/sex.vue'
import Age from './components/age.vue'
import Education from './components/education.vue'
import TotalExpenditure from './components/totalexpenditure.vue'
import Department from './components/department.vue'
export default {
  name: 'Dashboard',
  components: {
    Sex,
    Age,
    Education,
    TotalExpenditure,
    Department
  },
  data() {
    return {
      img: require('@/assets/common/keai.png')
    }
  },
  computed: {
    ...mapGetters([
      'name', 'staffPhoto'
    ]),
    ...mapState(['UserInfo'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #999;
          img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
        margin-top: 15px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
}

.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.header-card{
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

 .el-row {
    margin-bottom: 25px;
    margin-top: 25px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

